<template>
  <!-- 首页 -->
  <full-page :options="options" id="fullpage" ref="fullpage">
    <div class="section">
      <div class="banner-video-list">
        <!-- 轮播图 -->
        <swiper class="swiper-container" :options="swiperOptions">
          <swiper-slide
            class="swiper-item"
            :key="item.id"
            v-for="item in swiperList"
          >
            <el-image
              class="image"
              @click="toVideo(item.id)"
              style="height: 500px"
              :src="item.image"
              fit="fill"
            ></el-image>
          </swiper-slide>
        </swiper>
        <div class="viedo-list">
          <VideoList :isPart="isPart"></VideoList>
          <VideoList :isPart="isPart"></VideoList>
        </div>
      </div>
      <VideoList
        :showTitle="showTitle"
        :isTotality="isTotality"
        :listSize="6"
      ></VideoList>
    </div>
    <div class="section">
      <div class="video-list-broadside-list">
        <div class="video-list-broadside-list-left">
          <videoImageList :showTitle="showTitle"></videoImageList>
          <videoImageList></videoImageList>
        </div>
        <div class="video-list-broadside-list-right">
          <BroadsideList style="margin-top: 35px"></BroadsideList>
        </div>
      </div>
      <VideoList
        :showTitle="showTitle"
        :isTotality="isTotality"
        :listSize="6"
      ></VideoList>
    </div>

    <div class="section">
      <div class="video-list-broadside-list">
        <div class="video-list-broadside-list-left">
          <videoImageList :showTitle="showTitle"></videoImageList>
          <videoImageList></videoImageList>
        </div>
        <div class="video-list-broadside-list-right">
          <BroadsideList style="margin-top: 35px"></BroadsideList>
        </div>
      </div>
      <VideoList
        :showTitle="showTitle"
        :isTotality="isTotality"
        :listSize="6"
      ></VideoList>
    </div>
    <div class="section">
      <div class="video-list-broadside-list">
        <div class="video-list-broadside-list-left">
          <VideoTabPane :paneTitleList="tabPaneTitleList"></VideoTabPane>
        </div>
        <div class="video-list-broadside-list-right">
          <BroadsideList></BroadsideList>
        </div>
      </div>
      <VideoList
        :showTitle="showTitle"
        :isTotality="isTotality"
        :listSize="6"
      ></VideoList>
    </div>
  </full-page>
</template>

<script>
//页面引入swiper
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import VideoList from "@/component/videoList.vue";
import AdvertistingPosition from "@/component/advertistingPosition.vue";
import BroadsideList from "@/component/broadsideList.vue";
import VideoTabPane from "@/component/videoTabPane.vue";
import videoImageList from "@/component/videoImageList.vue";
import { getRandomVideo } from "../api/videoApi";
export default {
  components: {
    swiper,
    swiperSlide,
    VideoList,
    AdvertistingPosition,
    BroadsideList,
    VideoTabPane,
    videoImageList,
  },
  data() {
    return {
      tabPaneTitleList: [
        {
          label: "星期一",
          name: "星期一",
        },
        {
          label: "星期二",
          name: "星期二",
        },
        {
          label: "星期三",
          name: "星期三",
        },
        {
          label: "星期四",
          name: "星期四",
        },
        {
          label: "星期五",
          name: "星期五",
        },
        {
          label: "星期六",
          name: "星期六",
        },
        {
          label: "星期天",
          name: "星期天",
        },
      ],
      showTitle: true,
      isPart: true,
      isTotality: true,
      options: {
        resize: true,
      },
      swiperOptions: {
        pagination: ".swiper-pagination",
        autoplay: true,
        autoplay: {
          disableOnInteraction: true,
          delay: 3000,
        },
        effect: "coverflow",
      },
      swiperList: [{}, {}, {}, {}, {}],
    };
  },
  methods: {
    getSwiperList() {
      getRandomVideo(5)
        .then((res) => {
          this.swiperList = res.data.data.rows;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    toVideo(id) {
      this.$router.push({
        name: "video",
        query: {
          id: id,
        },
      });
    },
  },
  mounted() {
    this.getSwiperList();
  },
};
</script>

<style scoped lang="scss">
.banner-video-list {
  width: 100%;
  height: 60%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;

  .swiper-container {
    width: 30%;
    height: 100%;
    margin: 0 0 0 0;
    .swiper-item {
      width: 100%;
      height: 100%;
    }
  }

  .viedo-list {
    width: 69%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-start;
  }
}

.video-list-broadside-list {
  width: 100%;
  height: 60%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;

  .video-list-broadside-list-left {
    width: 80%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-around;
  }
  .video-list-broadside-list-right {
    width: 20%;
    height: 100%;
  }
}
.image {
  width: 100%;
  height: 100%;
}
</style>
